<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Han">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/try6.gitee.io/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/try6.gitee.io/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/try6.gitee.io/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/try6.gitee.io/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/try6.gitee.io/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/try6.gitee.io/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/try6.gitee.io/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta property="og:type" content="website">
<meta property="og:title" content="Hello JS">
<meta property="og:url" content="http://try66.gitee.io/try6.gitee.io/page/2/index.html">
<meta property="og:site_name" content="Hello JS">
<meta property="og:locale" content="zh-Han">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hello JS">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/try6.gitee.io/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://try66.gitee.io/try6.gitee.io/page/2/"/>





  <title>Hello JS</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?cc7e3057efb482b0f56c29d2716384da";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Han">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/try6.gitee.io/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Hello JS</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">所有的安排都是最好的</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/try6.gitee.io/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/try6.gitee.io/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/02/07/2018-02-07同源策略与跨域/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/02/07/2018-02-07同源策略与跨域/" itemprop="url">同源策略与跨域</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-02-07T06:47:46+08:00">
                2018-02-07
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/02/07/2018-02-07同源策略与跨域/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/02/07/2018-02-07同源策略与跨域/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/02/07/2018-02-07同源策略与跨域/" class="leancloud_visitors" data-flag-title="同源策略与跨域">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>同源啊跨域啊好像也要被讲烂了，网上随便搜搜也有很多详细的教程，阮老师的文章也是其中的经典。</p>
<p>前段时间经历了第一次前端面试，笔试开头的基础题就是问同源策略，当时菜逼如我答的不好，虽然最后结果是好的，但是还是想做一个整理给自己一雪前耻</p>
<h3 id="浏览器的同源策略"><a href="#浏览器的同源策略" class="headerlink" title="浏览器的同源策略"></a>浏览器的同源策略</h3><p>首先当然要介绍一下浏览器的同源策略</p>
<ul>
<li>端口相同</li>
<li>域名相同</li>
<li>协议相同</li>
</ul>
<p>这是用于保护用户数据的安全，防止恶意访问</p>
<p>按照阮老师的说法，目前，如果非同源，共有三种行为受到限制。</p>
<ol>
<li>Cookie、LocalStorage 和 IndexDB 无法读取。</li>
<li>Dom无法获取</li>
<li>Ajax请求<br>如何实现跨域，在有些必要的场合突破这些限制呢
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/02/07/2018-02-07同源策略与跨域/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/02/07/2018-02-07浏览器版本的判断思路/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/02/07/2018-02-07浏览器版本的判断思路/" itemprop="url">浏览器版本的判断思路</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-02-07T05:52:13+08:00">
                2018-02-07
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/02/07/2018-02-07浏览器版本的判断思路/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/02/07/2018-02-07浏览器版本的判断思路/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/02/07/2018-02-07浏览器版本的判断思路/" class="leancloud_visitors" data-flag-title="浏览器版本的判断思路">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>首先，作为一个合格的前端工程师，我们都知道BOM对象有一个属性navigator，包含了浏览器的信息。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2865721-4aa032f3b17a3411.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="navigator对象内容"></p>
<p>W3C中对navigator里面几种常用的属性做了介绍</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2865721-f472bc1e5b9ae916.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="常用属性"></p>
<p>而我们在平时开发中，经常需要去判断当前页面设备环境是什么，从而处理一些兼容问题，使用频率最高的应该就是传说中的<code>userAgent</code>属性了。</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/02/07/2018-02-07浏览器版本的判断思路/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/" itemprop="url">从"对象"的角度，带你重新认识js中的数据类型</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-01-27T06:47:46+08:00">
                2018-01-27
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/" class="leancloud_visitors" data-flag-title="从"对象"的角度，带你重新认识js中的数据类型">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p><code>2018-02-08新增Number和String部分</code></p>
<p>为什么一个数组可以有多种创建方法，他们的含义都是一样的吗？</p>
<p>number、String等这些数据类型的本质是什么，为什么有时候它们又能使用new来创建？</p>
<p>为什么说函数也是对象？普通函数也可以使用new来创建一个对象吗？</p>
<p>….</p>
<p>对这些问题的答案是否清晰，好像并不会在实际开发中影响你的项目，遇到疑惑浑水摸鱼也就过去了。</p>
<p>最近在看重新翻看《JavaScript面向对象编程指南》，深觉温故知新之意，半年前只看懂了前几章的基本概念，对后面几章所讲的原型，方法扩展，设计模式等看的云里雾里。现在再来回顾这本书，有种被点醒的感觉，对于很多一些平日里学习时遇到的模棱两可的概念通透了不少。</p>
<p>而在时候实际运用的时候，思路也自然而然的更加清晰了</p>
<p>整本书所讲的核心，也是我们经常挂在嘴边的： </p>
<blockquote>
<p><code>Javascript</code>是一种面向对象的编程语言，所有的一切都是对象</p>
</blockquote>
<p>本书第四章详细地讲了“对象”这个概念，能让人更深刻地理解js中所有的数据类型，以下为章节笔记。从对象的角度，重新认识各个数据类型<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/01/27/2018-01-27从"对象"的角度，带你重新认识js中的数据类型/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/01/13/2018-01-13css修png图标颜色/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/01/13/2018-01-13css修png图标颜色/" itemprop="url">css修png图标颜色</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-01-13T06:47:46+08:00">
                2018-01-13
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/01/13/2018-01-13css修png图标颜色/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/01/13/2018-01-13css修png图标颜色/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/01/13/2018-01-13css修png图标颜色/" class="leancloud_visitors" data-flag-title="css修png图标颜色">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>首先介绍一下，css3中有两个属性可设置投影，分别是：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box-shadow:x偏移, y偏移, 模糊大小, 色值;</span><br></pre></td></tr></table></figure></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值)</span><br></pre></td></tr></table></figure>
<p>####二者有什么区别？</p>
<h5 id="1-兼容性"><a href="#1-兼容性" class="headerlink" title="1. 兼容性"></a>1. 兼容性</h5><blockquote>
<p>box-shadow：从IE9+开始兼容<br><img src="http://upload-images.jianshu.io/upload_images/2865721-f9846f04ce516dde.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="box-shadow兼容性"></p>
</blockquote>
<blockquote>
<p>filter:drop-shadow：从IE13+兼容<br><img src="http://upload-images.jianshu.io/upload_images/2865721-83921f3787f93d07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="drop-shadow兼容性"></p>
</blockquote>
<p>从上图可知，<code>box-shadow</code>在兼容性上做的更好。而<code>drop-shadow</code>还只能在新版本的浏览器中使用，对老旧浏览器并不友好<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/01/13/2018-01-13css修png图标颜色/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/01/04/2018-01-04深入理解Js隐式类型转化/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/01/04/2018-01-04深入理解Js隐式类型转化/" itemprop="url">深入理解js隐式类型转化</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-01-04T06:47:46+08:00">
                2018-01-04
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/01/04/2018-01-04深入理解Js隐式类型转化/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/01/04/2018-01-04深入理解Js隐式类型转化/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/01/04/2018-01-04深入理解Js隐式类型转化/" class="leancloud_visitors" data-flag-title="深入理解js隐式类型转化">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>在开始本文前，先声明两句十分重要的话</p>
<blockquote>
<p>Falsy 类型值包括：<code>&quot;&quot;, 0, null, undefined, NaN, false</code>.</p>
</blockquote>
<p>换句话说，除了以上6种，其他任何值都为true</p>
<blockquote>
<p>Javascript是弱类型的语言</p>
</blockquote>
<p>换句话说，类型之间会通过某些操作进行转化。</p>
<p>好，表演开始</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/01/04/2018-01-04深入理解Js隐式类型转化/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2018/01/01/2018-01-01loading带你入门svg/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2018/01/01/2018-01-01loading带你入门svg/" itemprop="url">loading带你入门svg</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-01-01T06:47:46+08:00">
                2018-01-01
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2018/01/01/2018-01-01loading带你入门svg/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2018/01/01/2018-01-01loading带你入门svg/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2018/01/01/2018-01-01loading带你入门svg/" class="leancloud_visitors" data-flag-title="loading带你入门svg">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>参考资料:</p>
<p><a href="https://mp.weixin.qq.com/s/YQB5vk27DM3ph-aOPDogBg" target="_blank" rel="noopener">SVG简介-前端早读</a></p>
<p><a href="http://www.zhangxinxu.com/study/201507/svg-circle-loading.html" target="_blank" rel="noopener">张鑫旭–一个简单的loading demo</a></p>
<h5 id="一、svg简介"><a href="#一、svg简介" class="headerlink" title="一、svg简介"></a>一、svg简介</h5><p>SVG 是使用 XML 来描述二维图形和绘图程序的语言。</p>
<ul>
<li>SVG 指可伸缩矢量图形 (Scalable Vector Graphics)</li>
<li>SVG 用来定义用于网络的基于矢量的图形</li>
<li>SVG 使用 XML 格式定义图形</li>
<li>SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失</li>
<li>SVG 符合W3C标准</li>
<li>SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体</li>
</ul>
<p>支持IE9+<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2018/01/01/2018-01-01loading带你入门svg/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2017/12/08/2017-12-08京东大导航——预判用户行为（二）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2017/12/08/2017-12-08京东大导航——预判用户行为（二）/" itemprop="url">京东大导航——预判用户行为（二）</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-12-08T06:47:46+08:00">
                2017-12-08
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2017/12/08/2017-12-08京东大导航——预判用户行为（二）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2017/12/08/2017-12-08京东大导航——预判用户行为（二）/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2017/12/08/2017-12-08京东大导航——预判用户行为（二）/" class="leancloud_visitors" data-flag-title="京东大导航——预判用户行为（二）">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>在上篇<a href="http://www.jianshu.com/p/febbe1571e73/" target="_blank" rel="noopener">京东大导航——预判用户行为（一）</a>中讲到，我们对导航的切换操作设置了延时，解决了移入子菜单时不执行导航切换的问题。但同时引入了新的问题，即导航的延时造成了切换不流程。</p>
<p>如何才能做到，即保证用户进入子菜单的便捷，又能保证用户切换主导航的流程呢？</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2017/12/08/2017-12-08京东大导航——预判用户行为（二）/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2017/12/07/2017-12-07京东大导航——预判用户行为（一）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2017/12/07/2017-12-07京东大导航——预判用户行为（一）/" itemprop="url">京东大导航——预判用户行为（一）</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-12-07T21:08:08+08:00">
                2017-12-07
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2017/12/07/2017-12-07京东大导航——预判用户行为（一）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2017/12/07/2017-12-07京东大导航——预判用户行为（一）/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2017/12/07/2017-12-07京东大导航——预判用户行为（一）/" class="leancloud_visitors" data-flag-title="京东大导航——预判用户行为（一）">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p><img src="http://upload-images.jianshu.io/upload_images/2865721-dbfa4ca0dcd95782.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="nav.png"></p>
<p>电商类网站不可避免的需要很多商品分类，为了使用户能够快速定位到想要的商品分类，一个详细的主页导航就显得举足轻重。</p>
<p>淘宝和京东等体量较大的电商平台，web端的主页都使用了分类详细的大导航，而且在导航的用户体验上做足了文章。</p>
<p>不知道大家有没有注意过他们在导航的实现上，和一般的导航有什么区别。</p>
<p>先埋个彩蛋</p>
<p>下面我们来从零开始模拟开发一个具有二级目录大导航。<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2017/12/07/2017-12-07京东大导航——预判用户行为（一）/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://try66.gitee.io/try6.gitee.io/try6.gitee.io/2017/09/28/2017-09-28移动端触摸分页方案-1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Try_Luies">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/try6.gitee.io/images/pic.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hello JS">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/try6.gitee.io/2017/09/28/2017-09-28移动端触摸分页方案-1/" itemprop="url">移动端触摸分页方案</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-09-28T06:47:46+08:00">
                2017-09-28
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/try6.gitee.io/2017/09/28/2017-09-28移动端触摸分页方案-1/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2017/09/28/2017-09-28移动端触摸分页方案-1/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/try6.gitee.io/2017/09/28/2017-09-28移动端触摸分页方案-1/" class="leancloud_visitors" data-flag-title="移动端触摸分页方案">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">Visitors&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <ul>
<li>场景：移动端列表显示，数据庞大。后台数据有分页字段</li>
<li>需求：需要快速显示页面，需要显示当前页数，需要跨页跳转<br>Pc端可以使用分页按钮，但是移动端屏幕小，分页按钮不方便操作。</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/try6.gitee.io/2017/09/28/2017-09-28移动端触摸分页方案-1/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/try6.gitee.io/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/try6.gitee.io/">1</a><span class="page-number current">2</span>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/try6.gitee.io/images/pic.jpg"
                alt="Try_Luies" />
            
              <p class="site-author-name" itemprop="name">Try_Luies</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/try6.gitee.io/archives/">
              
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            

            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/try6" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-GitHub"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.jianshu.com/u/7a6944daafc3" target="_blank" title="简书">
                      
                        <i class="fa fa-fw fa-globe"></i>简书</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="www.baidu.com" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-微博"></i>微博</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Try_Luies</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/try6.gitee.io/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/try6.gitee.io/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/try6.gitee.io/js/src/motion.js?v=5.1.4"></script>



  
  

  

  


  <script type="text/javascript" src="/try6.gitee.io/js/src/bootstrap.js?v=5.1.4"></script>



  


  

    
      <script id="dsq-count-scr" src="https://try.disqus.com/count.js" async></script>
    

    

  




	





  














  





  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("", "");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  
  

  

  

  

</body>
</html>
